import React, { useState } from 'react';
import './FaqSection.css';

/**
 * FAQ单个问题项的类型定义
 * @property {string} question - 问题文本（可能包含序号前缀如"1. "）
 */
interface FaqItem {
  question: string;
}

/**
 * FAQ问题分类的类型定义
 * @property {string} title - 分类标题
 * @property {FaqItem[]} items - 该分类下的问题列表
 */
interface FaqCategory {
  title: string;
  items: FaqItem[];
}

/**
 * FAQ组件的Props类型定义
 * @property {(question: string) => void} onQuestionClick - 当问题被点击时的回调函数
 *   参数question是已去除序号前缀的纯净问题文本
 */
interface FaqSectionProps {
  onQuestionClick: (question: string) => void;
}

/**
 * FAQ组件 - 展示分类的常见问题，支持点击问题自动发送
 * @param {FaqSectionProps} props - 组件属性
 * @returns {JSX.Element} 渲染的FAQ组件
 */
const FaqSection: React.FC<FaqSectionProps> = ({ onQuestionClick }) => {
  // 状态：记录每个分类的展开/折叠状态
  // 类型为Record<string, boolean>，键是分类标题，值表示是否展开
  const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({});

  /**
   * 切换指定分类的展开状态
   * @param {string} title - 要切换的分类标题
   */
  const toggleCategory = (title: string) => {
    setExpandedCategories(prev => ({
      ...prev,
      [title]: !prev[title] // 取反当前状态
    }));
  };

  /**
   * 处理问题项的点击事件
   * @param {string} originalQuestion - 原始问题文本（可能包含序号前缀）
   */
  const handleQuestionClick = (originalQuestion: string) => {
    // 使用正则表达式去除开头的序号和空格（如"1. "、"2. "等）
    // 正则解释：
    // ^\d+   匹配开头的一个或多个数字
    // \.     匹配点字符
    // \s*    匹配零个或多个空白字符
    const cleanedQuestion = originalQuestion.replace(/^\d+\.\s*/, '');
    
    // 调用父组件传入的回调函数，传递清理后的纯净问题文本
    if (onQuestionClick) {
      onQuestionClick(cleanedQuestion);
    }
  };

  // FAQ数据 - 包含6个分类及其问题
  const faqData: FaqCategory[] = [
    {
      title: '如何选择会员版本',
      items: [
        { question: '1. 模板会员，素材下载会员和大会员的区别' },
        { question: '2. 个人商用授权和企业商用授权的区别' },
        { question: '3. 个人学习会员和个人商用会员有什么区别' },
        { question: '4. 如何购买会员/会员价格/查看会员权益' },
        { question: '5. 购买服务后是否可以退货退款？' }
      ]
    },
    {
      title: '玩法教程与帮助中心',
      items: [
        { question: '1. 稿定玩法教程集锦' },
        { question: '2. 稿定视频号教程' },
        { question: '3. 帮助中心入口' }
      ]
    },
    {
      title: '如何申请发票/查看订单',
      items: [
        { question: '1. 如何申请发票/查看订单' },
        { question: '2. 发票税点多少？' },
        { question: '3. 发票类型是什么' },
        { question: '4. 发票为啥在国家税务局平台进行发票查验查不到？' },
        { question: '5. 如何重开发票？' }
      ]
    },
    {
      title: '稿豆相关',
      items: [
        { question: '1. 如何查看我有多少稿豆' },
        { question: '2. 会员稿豆什么时候发放？' },
        { question: '3. 可以单独购买稿豆吗？' }
      ]
    },
    {
      title: '如何取消自动续费',
      items: [
        { question: '1. 自动续费怎么取消' }
      ]
    },
    {
      title: '授权相关',
      items: [
        { question: '1. 字体可以商用吗？' }
      ]
    }
  ];

  return (
    <div className="faq-container">
      {/* 主标题 */}
      <h2 className="faq-main-title">常见问题解答</h2>
      
      {/* 遍历所有分类 */}
      {faqData.map((category, catIndex) => (
        <div 
          key={`category-${catIndex}`}
          className={`faq-category ${expandedCategories[category.title] ? 'expanded' : ''}`}
        >
          {/* 分类标题 - 点击可展开/折叠 */}
          <div 
            className="faq-category-header"
            onClick={() => toggleCategory(category.title)}
            role="button"
            aria-expanded={expandedCategories[category.title]}
            tabIndex={0}
          >
            <h3 className="faq-category-title">
              {/* 展开/折叠图标 */}
              <span className="faq-category-icon">
                {expandedCategories[category.title] ? '▼' : '►'}
              </span>
              {category.title}
            </h3>
          </div>
          
          {/* 问题列表 - 只在分类展开时显示 */}
          {expandedCategories[category.title] && (
            <ul className="faq-question-list">
              {category.items.map((item, itemIndex) => (
                <li 
                  key={`question-${catIndex}-${itemIndex}`}
                  className="faq-question-item"
                  onClick={() => handleQuestionClick(item.question)}
                  style={{ cursor: 'pointer' }} // 鼠标悬停时显示手型指针
                >
                  {/* 显示原始问题文本（保持序号前缀以便阅读） */}
                  <div className="faq-question-text">{item.question}</div>
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
};

export default FaqSection;